<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            header {
                position: absolute;
                top: 20px;
                width: 200px;
                height: 50px;
                background-color: silver;
                will-change: transform;
            }
            header.hidden {
                visibility: hidden;
            }
            nav {
                height: 37px;
                overflow: hidden;
            }
            nav ul li {
                height: 50px;
                float: left;
                overflow: hidden;
            }
        </style>
        <script type="text/javascript">
            if (window.testRunner)
                testRunner.dumpAsText();

            function doTest() {
                var header = document.getElementsByTagName('header')[0];
                header.classList.toggle('hidden');
                if (window.testRunner && window.internals)
                    document.getElementById('layertree').innerText = internals.layerTreeAsText(document);
            }
            window.addEventListener('load', doTest, false);
        </script>
    </head>

<body>
    <header>
        <nav>
            <ul>
                <li>Some text here</li>
            </ul>
        </nav>
    </header>
    <pre id="layertree"></pre>
</body>
</html>
